<template>
  <div class="table-wrap" v-loading="loading">
    <div class="search_header">
      <div class="search_header_left">
        <el-button
          icon="el-icon-plus"
          @click="addProject"
          v-has="'investProjectInfo:add'"
          >新增项目</el-button
        >
        <el-button
          icon="el-icon-download"
          @click="downloadFile"
          :loading="btnLoading"
          :disabled="btnLoading"
          v-has="'investProjectInfo:export'"
          >下载数据</el-button
        >
        <el-button
          icon="el-icon-download"
          @click="downloadFileProcess"
          v-has="'investProjectInfo:export'"
          :loading="xlsxBtnLoading"
          :disabled="xlsxBtnLoading"
          >重点在谈表下载</el-button
        >
      </div>

      <div class="search_header_right">
        <el-input
          placeholder="请输入项目名称"
          v-model="parameter.projectName"
          @keydown.enter.native="search"
          @clear="search"
          clearable
        >
          <span
            @click="search"
            slot="suffix"
            style="display: inline-block"
          >
            <Icon
              title="搜索"
              name="sousuo"
              color="#A7ADB5"
              font-size="20"
            />
          </span>
        </el-input>
        <!-- <el-date-picker
          @change="search"
          v-model="parameter.year"
          type="year"
          placeholder="年度"
          value-format="yyyy"
          :clearable="false"
        /> -->
        <!-- <el-select
          placeholder="产业类别"
          v-model="parameter.industryType"
          clearable
          @change="search"
          @clear="search"
        >
          <el-option
            v-for="item in industryTypeOptions"
            :key="item"
            :label="item"
            :value="item"
          >
          </el-option>
        </el-select> -->
        <el-select
          placeholder="所属产业链"
          v-model="parameter.industryLink"
          clearable
          filterable
          @change="search"
          @clear="search"
        >
          <el-option
            v-for="item in industrialChainOptions"
            :key="item"
            :label="item"
            :value="item"
          >
          </el-option>
        </el-select>
        <el-select
          placeholder="项目经理"
          v-model="parameter.manager"
          clearable
          filterable
          @change="search"
          @clear="search"
        >
          <el-option
            v-for="item in managerOptions"
            :key="item"
            :label="item"
            :value="item"
          >
          </el-option>
        </el-select>
        <el-select
          placeholder="属性"
          v-model="parameter.property"
          clearable
          @change="search"
          @clear="search"
        >
          <el-option
            v-for="item in propertyOptions"
            :key="item"
            :label="item"
            :value="item"
          >
          </el-option>
        </el-select>
        <el-select
          placeholder="项目星级"
          v-model="parameter.projectStarLevel"
          clearable
          @change="search"
          @clear="search"
        >
          <el-option
            v-for="item in projectStarOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <el-select
          placeholder="入库年度"
          v-model="parameter.year"
          clearable
          @change="search"
          @clear="search"
        >
          <el-option
            v-for="item in yearList"
            :key="item"
            :label="item"
            :value="item"
          >
          </el-option>
        </el-select>
      </div>
    </div>
    <el-table
      :data="projectList"
      :header-cell-style="{
        background: '#F2F6FB',
        color: ' #6B767D'
      }"
      :row-class-name="tableRowClassName"
    >
      <el-table-column
        label="序号"
        align="center"
        show-overflow-tooltip
        width="80"
      >
        <template slot-scope="scope">
          {{ scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column
        label="项目名称"
        prop="projectName"
        show-overflow-tooltip
        min-width="160"
      />
      <el-table-column
        label="总投资(亿元/亿美元)"
        prop="investmentTotal"
        show-overflow-tooltip
        min-width="120"
      />
      <el-table-column
        label="所属产业链"
        prop="industryLink"
        show-overflow-tooltip
        min-width="120"
      />
      <!-- <el-table-column
        label="公司背景"
        prop="companyBackgroud"
        show-overflow-tooltip
      /> -->
      <!-- <el-table-column
        label="项目内容及诉求"
        prop="content"
        width="120"
        show-overflow-tooltip
      /> -->
      <el-table-column
        label="项目经理"
        prop="manager"
        min-width="120"
        show-overflow-tooltip
      />
      <el-table-column
        label="项目阶段"
        prop="stage"
        min-width="120"
        show-overflow-tooltip
      />
      <!-- <el-table-column
        label="项目最新进展"
        prop="newestProcess"
        show-overflow-tooltip
      /> -->
      <!-- <el-table-column
        label="存在问题及原因"
        prop="problemContent"
        width="120"
        show-overflow-tooltip
      /> -->
      <!-- <el-table-column
        label="工作建议及举措"
        prop="solveAdvice"
        width="120"
        show-overflow-tooltip
      /> -->
      <el-table-column
        label="属性"
        prop="property"
        show-overflow-tooltip
        min-width="100"
      />
      <el-table-column label="项目星级" min-width="90">
        <template slot-scope="scope">
          <el-rate
            v-model="scope.row.projectStarLevel"
            :max="3"
            disabled
          />
        </template>
      </el-table-column>
      <el-table-column
        label="更新时间"
        prop="updateTime"
        show-overflow-tooltip
        min-width="110"
      />
      <el-table-column
        label="操作"
        show-overflow-tooltip
        width="240"
      >
        <template slot-scope="scope">
          <el-button
            @click="viewProject(scope.row)"
            type="text"
            style="color: #00baff; font-weight: 400"
            >查看</el-button
          >
          <el-button
            @click="editProject(scope.row)"
            type="text"
            style="color: #00baff; font-weight: 400"
            v-has="'investProjectInfo:edit'"
            >编辑</el-button
          >
          <el-button
            @click="trackProgress(scope.row)"
            type="text"
            style="color: #00baff; font-weight: 400"
            v-has="'investProjectInfo:track'"
            >进度跟踪</el-button
          >
          <el-button
            @click="deleteProject(scope.row)"
            type="text"
            style="color: #ff5b5b; font-weight: 400"
            v-has="'investProjectInfo:delete'"
            >删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="table-pagination" v-if="total">
      <el-pagination
        background
        layout="prev, pager, next"
        :page-size="parameter.pageSize"
        @current-change="pageChange"
        :total="total"
        :current-page="parameter.pageIndex"
      >
      </el-pagination>
    </div>

    <ProgressDialog
      :visible.sync="showDialog"
      :currentInfo="currentInfo"
      :projectName="projectName"
      title="项目进展信息"
      @confirm="handleSubmit"
    />
  </div>
</template>

<script>
import {
  investInfoQuery,
  businessProjectManager,
  deleteInvestInfo,
  addInvestProgressInfo,
  downloadInvestInfo,
  downloadInvestInfoXlsx
} from '@/api/dataManagement'
import { userQuery } from '@/api/user'
import Icon from '@/components/icon'
import ProgressDialog from './components/addProgressDialog.vue'
import {
  industryTypeOptions,
  propertyOptions,
  projectStarOptions,
  industrialChainOptions
  // entryYearOptions
} from '@/utils/project/data'
import { downloadBlobFile } from '@/utils/download'
import listKeepAliveMixin from '@/mixins/listKeepAliveMixin'

const DEPT_NAME = '投资促进部'
export default {
  name: 'investProjectInfoList',
  mixins: [listKeepAliveMixin],
  components: {
    Icon,
    ProgressDialog
  },
  data() {
    return {
      projectList: [],
      total: '',
      btnLoading: false,
      xlsxBtnLoading: false,
      parameter: {
        year: '',
        projectName: '',
        industryType: '',
        property: '',
        pageIndex: 1,
        pageSize: 10,
        projectStarLevel: ''
      },
      loading: false,
      showDialog: false,
      selectPkid: '',
      yearList: [],
      currentInfo: {
        property: '',
        stage: ''
      },
      projectName: '',
      managerOptions: []
    }
  },
  computed: {
    industryTypeOptions() {
      return industryTypeOptions
    },
    propertyOptions() {
      return propertyOptions
    },
    projectStarOptions() {
      return projectStarOptions
    },
    industrialChainOptions() {
      return industrialChainOptions
    }
    // entryYearOptions() {
    //   return entryYearOptions
    // }
  },
  mounted() {
    const year = new Date().getFullYear()
    this.yearList = [year, year - 1]
    this.getManagerOptions()
    this.getList()
  },
  activated() {
    if (this.$route.query.refresh) {
      this.getList()
      this.$router.replace({
        path: this.$route.path,
        query: { ...this.$route.query, refresh: undefined }
      })
    }
  },

  methods: {
    getManagerOptions() {
      businessProjectManager().then((res) => {
        this.managerOptions = res.data
      })
    },
    search() {
      this.parameter.projectName =
        this.parameter.projectName?.trim?.() || ''
      this.parameter.pageIndex = 1
      this.getList()
    },

    pageChange(page) {
      this.parameter.pageIndex = page
      this.getList()
    },

    // 获取用户列表
    getList() {
      this.loading = true
      investInfoQuery(this.parameter).then((res) => {
        if (res.success) {
          this.total = res.data.count
          this.projectList = res.data.list.map((item) => {
            return {
              ...item,
              projectStarLevel: item.projectStarLevel
                ? Number(item.projectStarLevel)
                : 0
            }
          })
        }
        this.loading = false
      })
    },

    // 表格高亮
    tableRowClassName({ rowIndex }) {
      if (rowIndex % 2 === 1) {
        return 'light'
      } else {
        return ''
      }
    },

    addProject() {
      this.$router.push({
        path: '/dataManagement/projectManagement/investProjectInfo/add',
        query: {
          title: '新增'
        }
      })
    },

    editProject(row) {
      this.$router.push({
        path: '/dataManagement/projectManagement/investProjectInfo/add',
        query: {
          pkid: row.pkid,
          title: '编辑',
          isEdit: true,
          isDetail: false
        }
      })
    },

    // 项目查看
    viewProject(row) {
      this.$router.push({
        path: '/dataManagement/projectManagement/investProjectInfo/add',
        query: {
          pkid: row.pkid,
          title: '查看',
          isEdit: true,
          isDetail: true
        }
      })
    },

    // 删除项目
    deleteProject(row) {
      this.$confirm(
        '此操作将永久删除该项目，是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      )
        .then(() => {
          deleteInvestInfo(row.pkid).then((res) => {
            if (res.success) {
              this.$message.success('删除成功')
              if (
                this.total % 10 === 1 &&
                this.parameter.pageIndex ===
                  parseInt(this.total / 10) + 1 &&
                this.parameter.pageIndex !== 1
              ) {
                this.parameter.pageIndex -= 1
              }
              this.getList()
            } else {
              this.$message.error(res.message)
            }
          })
        })
        .catch((error) => {
          this.$message.info('已取消删除')
        })
    },
    trackProgress(row) {
      this.selectPkid = row.pkid
      this.showDialog = true
      this.currentInfo = {
        property: row.property,
        stage: row.stage
      }
      this.projectName = row.projectName
    },
    downloadFile() {
      if (this.btnLoading) return
      this.btnLoading = true
      downloadInvestInfo(this.parameter)
        .then((res) => {
          downloadBlobFile(res, '招商项目信息表.xlsx')
        })
        .catch((err) => {
          this.$message.error('下载失败')
        })
        .finally(() => {
          this.btnLoading = false
        })
    },
    downloadFileProcess() {
      if (this.xlsxBtnLoading) return
      this.xlsxBtnLoading = true
      downloadInvestInfoXlsx(this.parameter)
        .then((res) => {
          downloadBlobFile(res, '招商项目重点在谈表.xlsx')
        })
        .catch((err) => {
          this.$message.error('下载失败')
        })
        .finally(() => {
          this.xlsxBtnLoading = false
        })
    },
    handleSubmit(data) {
      data.projectId = this.selectPkid
      addInvestProgressInfo(data)
        .then((res) => {
          if (res.success) {
            this.$message.success('新增成功')
            this.getList()
          }
        })
        .catch((err) => {
          this.$message.error(err)
        })
    }
  }
}
</script>

<style scoped lang="scss">
@import '~@/assets/css/table.scss';
</style>
